<template>
	<view class="teacher-box">
		 
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="6000" :duration="500">
			<swiper-item v-for="(item,index) in teacherList" :key="index">
				<view class="swiper-item" @click="showModal(item)">
					<image :src="item.url" class="swiper-img" mode="widthFix"></image>
					<view class="swiper-content">
						<text class="title">{{ item.pName }}-高级教师</text>
						
						<view class="">
							<text v-if="item.subject">{{item.subject}}</text> 
							<text v-if="item.comment">{{ item.comment }} </text> 
							<text v-if="item.teaching">{{ item.teaching }} </text> 
							<text v-if="item.work">{{item.work}} </text> 
							<text v-if="item.honorary">{{ item.honorary }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<PopWindow  :visible.sync="isVisible"  width="603rpx" height="335rpx">
			 <template v-slot:content>
				 
				 <view class="teancher-box">
				 	 <image :src="curTeacher.url" mode="widthFix"></image>
					 <view class="info-detail">
					 	 <text class="title">{{ curTeacher.pName }}-高级教师</text>
						
						<view v-if="curTeacher.comment" class="inner-one">
							 <text class="stitle">个人特点</text>
							{{ curTeacher.comment }}
						 </view> 
						<view v-if="curTeacher.teaching" class="inner-one">
						<text class="stitle">救学理念</text>
						{{ curTeacher.teaching }}
						 </view> 
						<view v-if="curTeacher.work" class="inner-one">
						<text class="stitle">工作经验</text>
						{{curTeacher.work}} </view> 
						<view v-if="curTeacher.honorary" class="inner-one">
						<text class="stitle">荣誉成就</text>
						{{ curTeacher.honorary }}
						</view>
					 </view>
				 </view>
			 </template>
			
		</PopWindow>
		
	</view>
</template>

<script>
	import { fetchData } from '../../utils/request';
	import  {mapState} from 'vuex'

	export default {
		name:"Teacher",
		data() {
			return {
				teacherList:[],
				isVisible:false,
				curTeacher:{}
			};
		},
		computed:{
			...mapState(['classId','baseImgURL'])
		},
		methods:{
			async getTeacherList(){
				let res = await fetchData({
				        url:`/database/person/info/teacherCharmList`,
						data:{
							classId:this.classId
						},
				        method:'GET'
				    })
					if(res.code==200){
						res.rows.forEach((item)=>{
							item.url = item.url ? item.url : this.baseImgURL+'/introduce/teacher.png';
						})
						this.teacherList = res.rows;
					}
				
			},
			
			showModal(item){
				this.isVisible = true;
				this.curTeacher = item;
			}
			
		},
		mounted(){
			this.getTeacherList()
		}
	}
</script>

<style lang="scss" scoped>
	.teacher-box {
		height: 88%;
	}
.swiper {
	height:100%;
}
.swiper-item {
	display: flex;
	height:128.13upx;
	margin:11.72upx;
	.swiper-img {
		width: 95.31upx;
		margin-right: 7.81upx;
	}
	.swiper-content {
		flex:1;
		color: #888;
		line-height: 13.67upx;
		display: flex;
		flex-direction: column;
		padding-top: 11.72upx;
		font-size: 7.81upx;
		overflow: hidden;
		.title {
			font-size: 8.59upx;
			color: #333;
			padding-bottom: 5.86upx;
		}
		
	}
}

</style>